<template>
  <el-carousel :height="height" indicator-position="none" :style="{ width: height }">
    <el-carousel-item v-for="item in swiperItems" :key="item">
      <img alt="" :src="item" style="width: 100%; vertical-align: baseline" />
    </el-carousel-item>
  </el-carousel>
</template>
<script>
  export default {
    name: 'Swiper',
    props: {
      height: {
        type: String,
        default: '420px',
      },
    },
    data() {
      return {
        swiperItems: [
          require('@/assets/swiper_images/swiper-cyyq.png'),
          require('@/assets/swiper_images/swiper-gx.png'),
          require('@/assets/swiper_images/swiper-gy.png'),
          require('@/assets/swiper_images/swiper-ny.png'),
          require('@/assets/swiper_images/swiper-daolu.png'),
          require('@/assets/swiper_images/swiper-dianli.png'),
          require('@/assets/swiper_images/swiper-shsy.png'),
          require('@/assets/swiper_images/swiper-smwl.png'),
          require('@/assets/swiper_images/swiper-sthgchj.png'),
          require('@/assets/swiper_images/swiper-xxjcss.png'),
        ],
      }
    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-carousel__container {
    //width: 420px;
    overflow: hidden;
  }
</style>
